<template>
  <div class="app">
    <router-view></router-view>
    <van-sticky offset-bottom="0rem" position="bottom">
      <music-playback v-show="isMP"></music-playback>
    </van-sticky>
    <YYLoading v-if="isShow"></YYLoading>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, nextTick, provide } from 'vue'
import MusicPlayback from '@/views/musicPlayback.vue'
import { useStore } from '@/store/index'

import YYLoading from '@/base_ui/loading/load_ing.vue'

export default defineComponent({
  components: {
    MusicPlayback,
    YYLoading
  },
  setup() {
    //拿到控制loading逐渐显示隐藏的值
    const store = useStore()
    const isShow = computed(() => {
      return store.state.loading
    })
    //底部播放组件的显示与隐藏
    const isMP = computed(() => store.state.songList.isMP)

    return {
      isShow,
      isMP
    }
  }
})
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
